<%--
  Created by IntelliJ IDEA.
  User: 92329
  Date: 2018/4/23
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common.jspf"%>
<html>
<head>
    <title>文章管理</title>
    <style type="text/css">
        a:link {
            color: #000000;
            text-decoration: none;
        }
        a:visited {
            color: #000000;
            text-decoration: none;
        }
        a:hover {
            color: #999999;
            text-decoration: underline;
        }
    </style>
    <script>
        var paramMap={pageNum:1,state:'',date:'',title:''};
        var finish=0;
        function loadList(param,append) {
         //   paramMap.pageNum=1;
         //   finish=0;
            $.post("${hkxyPath}/${type}/page-list-json",param,function(result){
                console.log("load")
                if (result.code==1){
                    var list=result.data;
                    var html='';
                    if(list.length==0){
                        console.log("没有了")
                        finish=1;
                        $("#loading").hide();
                        $("#loadover").show();
                    }else{
                        var path='${hkxyPath}';
                        var type='${type}';
                        $.each(list,function (i,val) {
                         //   console.log(val.imgPreview);
                            var state;
                            if(val.state==1){
                                state="已发布";
                            }else if(val.state==0){
                                state="草稿";
                            }else{
                                state="未知状态";
                            }

                            html+= "<li id='article"+val.id+"' class='list-group-item' style='height: 110px'>";
                            if(val.imgPreview!=''&&val.imgPreview!=null){
                                html+= "<div id='img"+val.id+"' style='width: 150px;padding-right: 20px' class='pull-left'>" +
                                    "<img src='"+val.imgPreview+"' style='width: 100%;height: 100%'/>" +
                                    "</div>";
                            }
                            html+="<div>" +
                                "<div class='padding-5'><h4><strong><a target='_blank' href='"+path+"/"+type+"/show/"+val.id+"' >"+val.title+"</a></strong></h4></div>" +
                                "<div class='padding-5'><small class='text-muted'>"+val.datetimestr+"&nbsp;&nbsp;"+state+"</small></div>"+
                                "<div class='padding-5'>" +
                                "<div class='pull-left'> <small class='text-muted'>浏览量："+val.hits+"</small></div>" +
                                "<div class='pull-right'>" +
                                "<button type='button' class='btn btn-link' onclick='toModify("+val.id+")'>编辑</button>" +
                                "<button type='button' class='btn btn-link' onclick='toDelete("+val.id+")'>删除</button>" +
                                "</div>" +
                                "</div>" +
                                "</div>" +
                                "</li>";

                        });

                        $("#loading").hide();
                        $("#loadover").hide();
                        finish=0;
                    }
                    if(append==1){
                        $("#article-List").append(html);
                    }else{
                        $("#article-List").html(html);
                    }
                }
            });

        }
        $(function () {
            paramMap.pageNum=1;
            loadList(paramMap,0);
            //监听滚动
            $(window).scroll(function() {
                if(finish==0){
                    var docHeight=$(document).height();
                    var docScrollTop=$(document).scrollTop();
                    var windowHeight;
                    if($(document).height()>=$(window).height()){
                        windowHeight=document.body.clientHeight;
                    }else{
                        windowHeight=$(document).height();
                    };

                    if (docScrollTop >= docHeight - windowHeight) {
                        finish=1;
                        paramMap.pageNum+=1;
                        $("#loading").show();
                        loadList(paramMap,1);
                        /*
                        $.ajax({
                                type:"post",
                                url:"${hkxyPath}/${type}-list",
                                data:paramMap,
                                success:function (data) {
                                    $("#article-List").append(data);
                                    finish=0;
                                    $("#loading").addClass("hidden");
                                },
                                error:function (data) {
                                    $("#loading").addClass("hidden");
                                    $("#loadover").removeClass("hidden");
                                    finish=1;
                                }
                            }
                        )
                        */
                    }
                }
            });
        });



        //Botton颜色切换
        function change(btn){
            $(".state-list").find("button").each(function (i,item) {
                $(item).removeClass("btn-info");
            });
            $(btn).addClass("btn-info");
        }
        //顶栏筛选，显示所有文章
        function showAllArticle(btn) {
            paramMap.state='';
            paramMap.pageNum=1;
            finish=0;
            loadList(paramMap);
            change(btn);
        }
        //顶栏筛选，显示已发布文章
        function showPublishedArticle(btn) {
            paramMap.state='1';
            paramMap.pageNum=1;
            finish=0;
            loadList(paramMap);
            change(btn);
        }
        //顶栏筛选，显示草稿文章
        function showDraftArticle(btn) {
            paramMap.state='0';
            paramMap.pageNum=1;
            finish=0;
            loadList(paramMap);
            change(btn);
        }
        //提交日期筛选
        function submitDate(){
            var date=$("#date").val();
            finish=0;
            paramMap.pageNum=1;
            if(date==''){
                paramMap.date='';
                loadList(paramMap);
            }
            else {
                paramMap.date=date;
                loadList(paramMap);
            }
        }
        //模糊查找
        function search() {
            var keyword=$("#keyword").val();
            paramMap.pageNum=1;
            finish=0;
            if(keyword==''){
                paramMap.title='';
                loadList(paramMap);
            }else {
                paramMap.title=keyword;
                loadList(paramMap);
            }
        }
        function toModify(id) {
            $("#main").load("${hkxyPath}/${type}/modify",{id:id});
            history.pushState(null,null,"${hkxyPath}/${type}/modify");
        }
        function toDelete(id) {
            var c=confirm("文章删除后将不可恢复！\n确认删除？");
            if(c){
                $.post("${hkxyPath}/${type}/delete",{id:id},function (result) {
                    if(result.code==1){
                        var liid="#article"+id;
                        $(liid).remove();
                        tips(1);
                    }else{
                        tips(0);
                    }

                })
            }
        }
    </script>
</head>
<body id=ArticleManage>
<div id="header" class="header-bottom-my1">
    <h2 class="col-md-3 col-md-offset-0">所有内容</h2>
    <br>
    <div id="search" class="input-group col-md-offset-8 col-md-4">
        <input id="keyword" type="text" class="form-control" placeholder="请输入关键字" >
        <span class="input-group-btn">
                <button class="btn btn-default" type="button" style="height: 34px;" onclick="search()">
                   <i class="fa fa-search"></i>
                </button>
            </span>
    </div>
</div>

<div id="articleList">
    <%@include file="tips.jspf"%>
    <!--按条件筛选-->
    <div id="filterBox" class="well well-sm">
        <div id="filterState" style="padding-top: 10px">
            <ul class="list-inline state-list">
                <li><span style="margin-left: 40px">状态：</span></li>
                <li><button class="btn btn-default btn-sm btn-info" onclick="showAllArticle(this)">全部</button></li>
                <li><button class="btn btn-default btn-sm" onclick="showPublishedArticle(this)">已发布</button></li>
                <li><button class="btn btn-default btn-sm" onclick="showDraftArticle(this)">草稿箱</button></li>
                <%-- <li><button class="btn btn-default btn-sm" onclick="showRecycleArticle(this)">回收站</button></li>--%>
            </ul>
        </div>
        <div id="filterTime" style="padding-top: 10px;padding-bottom: 10px">
            <ul class="list-inline">
                <li><span style="margin-left: 40px">日期：</span></li>
                <li><input type="date" id="date" name="date" style="height: 30px" /></li>
                <li><input type="button" value="筛选" class="btn btn-default btn-sm" onclick="submitDate()"></li>
            </ul>
        </div>
    </div>
    <!--文章列表-->
    <div >
        <ul id="article-List" class="list-group" style="margin-top: 25px">

        </ul>
    </div>
    <!--底部提示-->
    <div>
        <div id="loading" hidden>
            <p class="text-center"> <img src="${imgPath}/loading.gif">正在加载</p>
        </div>
        <div id="loadover" hidden>
            <p class="text-center">没有更多数据了</p>
        </div>
    </div>

</div>

</body>
</html>
